<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet"type="text/css" href="js/themes/default/easyui.css">
    <link rel="stylesheet"type="text/css" href="js/themes/icon.css">
    <link rel="stylesheet"type="text/css" href="js/themes/color.css">
    <link rel="stylesheet"type="text/css" href="js/demo/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript"src="js/jquery.easyui.min.js"></script>
</head>
<body>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">增加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">修改</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a>
</div>

<table id="dg" title="宠物信息" class="easyui-datagrid"style="width:700px;height:250px"
       url="page"
       toolbar="#toolbar" pagination="true"
       rownumbers="true" fitColumns="true" singleSelect="true"  >
    <thead>


    <tr>
        <th field="petid" width="50">id</th>
        <th field="petname" width="50">姓名</th>
        <th field="petbreed" width="50">品种</th>
        <th field="petsex" width="50">性别</th>
        <th field="birthday" width="50">日期</th>
        <th field="desc" width="50">描述</th>
    </tr>
    </thead>


</table>
<!--增加代码-->
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftite">增加宠物信息</div>
    <form id="fm" method="post">
        <div class="fitem">
            <label>姓名：</label>
            <input name="petname" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>品种：</label>
            <input name="petbreed" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>性别：</label>
            <input name="petsex" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>日期：</label>
            <input name="birthday" type="date">
        </div>
        <div class="fitem">
            <label>描述：</label>
            <input name="desc" class="easyui-validatebox" required="true">
        </div>

    </form>
</div>
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>

<!--分页代码-->
<script type="text/javascript">
//分页方法
    $(function(){
        var p = $('#dg').datagrid('getPager');
        $(p).pagination({
            pageSize: 10,//每页显示的记录条数，默认为10
            pageList: [5, 10, 15],//可以设置每页记录条数的列表
            beforePageText: '第',//页数文本框前显示的汉字
            afterPageText: '页    共 {pages} 页',
            displayMsg: '当前显示 {from}-{to} 条记录,共 {total} 条记录'
        });
    });
//增加方法
function newUser(){
    $('#dlg').dialog('open').dialog('setTitle','增加');
    $('#fm').form('clear');
    url = 'usersave'; //注册请求的url
}
//修改的按钮事件
function editUser() {

    var row = $('#dg').datagrid('getSelected');
    if (row){
        $('#dlg').dialog('open').dialog('setTitle','修改');
        $('#fm').form('load',row);
        //修改的url  row(是实体类对象)  row.uid是 实体类的id
        url = 'edituser?petid='+row.petid;
    }
}
//增加和修改的保存按钮事件
function saveUser(){
    $('#fm').form('submit',{
        url: url, //变量 根据 注册和修改改变
        onSubmit: function(){
            return $(this).form('validate');
        },
        success: function(result){ //回调函数
            $('#dlg').dialog('close');        // close the dialog
            $('#dg').datagrid('reload');
        }
    });
}
//删除的事件
function destroyUser(){
    var row = $('#dg').datagrid('getSelected');
    if (row){
        $.messager.confirm('Confirm','是否删除?',function(r){
            if (r){
                $.post('delusers',{id:row.petid},function(result){
                    if (result=="ok"){
                        $('#dg').datagrid('reload');    // reload the user data
                    } else {
                        $.messager.show({    // show error message
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    }
                },'json');
            }
            $('#dg').datagrid('reload');
        });
    }
}
</script>
</body>
</html>